// package_01/pages/source-data/index.js
import {pizza} from '../../utils/mock-data.js'
const app = getApp()
const dayjs = require('dayjs')
Page({

  /**
   * 页面的初始数据
   */
  data: {
    value: '',
    clearable: true, //是否启用清除控件
    queryStatus: 1, //1 为尚未查询  2查询为空  3查询结果,

    search: '',

    treeData: {
      data: []
    },
    clickItem: {},
    resultArr: [],
    colors: ['#FAA24A', '#F05F62', '#4AA3D9', '#45617B', '#807597', '#A59C8C', '#CE6E8D']
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log(options);
    const {search} = options
    this.setData({search})
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /** 
   * 生命周期函数--监听页面显示
   */
  onShow() {
    // this.getInfo()
    console.log(pizza);
    // // console.log('溯源事件', pizza.traceabilityEvents);
    this.getInfo()
    // this.setData({
    //   treeData: {
    //     "name": "root",
    //     "children": [
    //       {
    //         "name": "a",
    //         "itemStyle": {
    //           "color": 'red',
    //         },
    //         "lineStyle": {
    //           "color": 'red'
    //         },
    //         "children": [{
    //           "name": "a1"
    //         }, {
    //           "name": "a2"
    //         }]
    //       }, 
    //       {
    //         "name": "b",
    //         "children": [{
    //           "name": "b1"
    //         }, {
    //           "name": "b2"
    //         }, {
    //           "name": "b3"
    //         }, {
    //           "name": "b4"
    //         }]
    //       }, 
    //     ]
    //   }
    // })
  },

  handleData(data){
    const producerInfo = data.traceabilityEvents.filter(raceabilityEventItem => raceabilityEventItem.type === '生产')[0]
    let item = { 
      children: [
        // {
        //   name: producerInfo.location,
        //   flag: 'location',
        //   children: []
        // }
      ],
      ...data,
    }
    // item.traceabilityEvents = data.traceabilityEvents
    // item.locaion = producerInfo.location
    // item.operator = producerInfo.operator
    producerInfo?.inputMaterials?.forEach(inputMaterial => {
      item.children.push(this.handleData(inputMaterial))
      // item.children[0].children.push(this.handleData(inputMaterial))
    })
    return item
  },

  clickTreeItem(e){
    // this.setData({
    //   clickItem: e.detail
    // })
    const {seriesName, name} = e.detail
    const data = this.data.treeData.data
    const seriesNameFilterData = data.map(tree => {
      if (tree.treeName === seriesName) {
        tree.clickItem = {
          ...e.detail,
          itemTraceabilityEvents: e.detail.itemTraceabilityEvents.map(item => {
            return {
              ...item,
              formatTime: dayjs(item.time).format('YYYY-MM-DD HH:mm:ss')
            }
          })
        }
      }
      return tree
    })
    this.flattenArray(this.levelOrderTraversal(seriesNameFilterData.filter(i => i.treeName === seriesName))).map(item => {
      item.itemStyle = {
        color: '#B0C4DE'
      }
      if (item.name === name) {
        item.itemStyle = {
          color: 'red'
        }
      }
      return item
    })
    this.setData({
      [`treeData.data`]: seriesNameFilterData
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
    this.setData({
      value: '',
    })
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  // input聚焦
  focusInput(){
    this.setData({
      queryStatus: 1,
    })
  },

  /**
   * 输入内容变化时触发
   * @param {*} e 
   */
  onChange(e) {
    this.setData({
      value: e.detail,
    });
    if (!e.detail) {
      this.getInfo()
    }
  },

  /**
   * 点击搜索查询
   */
  onClick(){
    if (this.data.queryStatus !== 1) return
    this.formSubmit({detail: this.data.value})
  },

  /**表单提交 */
  formSubmit(e){
    // console.log(e);
    const name = e.detail
    if (name === '') {
      wx.showToast({
        title: '搜索信息不能为空',
        icon: 'none'
      })
    }else{
      this.setData({
        value: name
      }, () => {
        this.getInfo()
      })
    }
  },

  getInfo(e){
    let data = {}
    if (this.data.value) {
      data = {
        ...data,
        keywords: this.data.value
      }
      this.setData({
        [`treeData.data`]: this.data.resultArr.filter(item => {
          if (item.name.includes(this.data.value)) {
            return item
          }
        }).map((tree,index) => ({...tree, treeName: 'tree'+index}))
      })
    }else{
      const result = this.handleData(pizza)
      const resultLevelArr = this.levelOrderTraversal([result])
      let resultArr = this.flattenArray(resultLevelArr)
      console.log(resultArr);
      this.setData({
        [`treeData.data`]: [{...result, treeName: 'tree1'}],
        resultArr
      })
    }
    // 搜索的文字/扫描的条形码结果
    // getInfoApi(data).then(res => {
    //   console.log('信息查询', res);
    //   if (res.data.code === 200) {

    //   }else if (res.data.code === 500) {
    //     this.setData({
    //       queryStatus: 2
    //     })
    //     wx.showToast({
    //       title: res.data.msg,
    //       icon: 'error'
    //     })
    //   }
    // })
  },

  /**
   * 树结构层次遍历
   * @param {*} data [{..., children: []}]
   */
  levelOrderTraversal(data) {
    const queue = [...data];
    const result = [];
    while (queue.length > 0) {
      const levelSize = queue.length;
      const currentLevel = [];
      for (let i = 0; i < levelSize; i++) {
        const currentNode = queue.shift();
        currentLevel.push(currentNode);
        if (currentNode.children) {
          queue.push(...currentNode.children);
        }
      }
      result.push(currentLevel);
    }
    return result;
  },

  /**
   * 二维数组扁平化
   * @param {*} arr
   * @returns
   */
  flattenArray(arr) {
    const result = [];
    for (let i = 0; i < arr.length; i++) {
        if (Array.isArray(arr[i])) {
            result.push(...this.flattenArray(arr[i]));
        } else {
            result.push(arr[i]);
        }
    }
    return result;
  },

  /**
   * 数组转树结构
   *  拓扑结构数据是设备列表形式，其中设备以mac作为标识
   *  设备之间通过"upstream_mac"指示父节点建立联系
   * @param {*} obj
   * @returns
   */
  jsonToTree(obj) {
    // 深拷贝原数据  防止更改原数据
    const data = JSON.parse(JSON.stringify(obj))
    // 初始化结果数组，并判断输入数据的格式
    let result = [] // 存储树的根节点
    if (!Array.isArray(data)) {
      return result
    }
    // 使用map，将当前对象的macaddr与当前对象对应存储起来
    let macDeviceMap = {};
    data.forEach(device => {
      macDeviceMap[device.mac] = device;
    })

    // 将设备加入其父节点的children列表或者直接加入结果数组
    data.forEach(item => {
      const parent = macDeviceMap[item.upstream_mac]
      if (parent) {
        (parent.children || (parent.children = [])).push(item)
      } else {
        result.push(item)
      }
    })
    return result
  }
})